<template>
        <div class="checkins page-bg" :class="{'pop-on' : popType}">
            <h3 v-show="checkinsPageShow" class="page-title">灌满16L可以兑换礼品券</h3>
            <em v-show="checkinsPageShow" class="page-em">每日签到可获得1L水</em>
            <div v-show="checkinsPageShow">
                <checkins-cpn v-on:popShow="popShow" ref="measure"></checkins-cpn>
                
                <div class="cpn-box">
                	礼品券内容
                </div>
                <div class="rule-box">
                    <h4 class="rule-title">活动规则</h4>
                    <div class="rule-cont">
                        <p class="cont-title">活动说明</p>
                            <p>活动时间：即日起至2017年12月31日；</p>
                            <p>活动对象：车享家APP用户；</p>
                            <p>奖励内容：车享家抵价券（每期抵价券内容不一，具体抵价券以当期活动页为准）；</p>
                            <p>券说明：详细券规则可至我的-优惠券查看；</p>
                           <p>如您有任何疑问，详询车享家客服热线：<br/>4008-020-666</p>
                        </p>
                    </div>
                </div>
                <div class="pop-main" :class="{'pop-show' : popType}">
                    <h4 class="pop-title">今日已签到</h4>
                    <div class="pop-cont">
                        <i class="icon-water">{{addWaterNum}}mL</i>
                        <p>恭喜你，今日获得{{addWaterNum}}mL水量</p>
                        <p>再接再厉继续保持！</p>
                    </div>
                    <a href="javascript:;" v-on:click="popShow" class="pop-btn">好的</a>
                </div>
         	</div>
	        <checkins-cpn-list ref="cpnList"></checkins-cpn-list>
			<qdgsdialog ref="qdgsdialog"></qdgsdialog>
        </div>
</template>

<script>

import common from "../../assets/js/common.js";
import checkinsCpn from "./checkinsCpn/checkinsCpn";
import checkinsCpnList from "./checkinsCpnList/checkinsCpnList";
import qdgsdialog from '../common/qdgsdialog';
import Url  from 'url';
import QueryString from 'querystring';
export default {
    data: function() {
        return {
        	addWaterNum: 1000,
            getUserWaterUrl:'/water/getUserWater.htm',//用户灌水状态接口
            checkinsPageShow:true,//灌水组件显示
            checkinsCpnListPageShow:false,//券列表显示
            popType:false
        }
    },
    created: function (){
  		var _this = this;
		var hrefUrl = window.location.href;
    	var urlObj = Url.parse(hrefUrl);
    	var queryObj = QueryString.parse(urlObj.query);
    	var userInfo = queryObj.userInfo;
        sessionStorage.setItem("userInfo", userInfo);
	},
    mounted:function(){
        this.urlMonitor();
        this.checkinsAjax(this.getUserWaterUrl);
    },
    components: { checkinsCpn,checkinsCpnList,qdgsdialog},
    methods: {
        urlMonitor:function(){
            var _this = this;
            window.addEventListener('hashchange',function(e){
                _this.checkinsPageShow = !_this.checkinsPageShow;
                _this.checkinsCpnListPageShow = !_this.checkinsCpnListPageShow;
                if (_this.checkinsCpnListPageShow) {
                	_this.$refs.cpnList.getQuanList();
                	_this.$refs.cpnList.showQuanListPage();
                }else {
                	_this.$refs.qdgsdialog.isShowDialog = false;
                	_this.$refs.cpnList.hideQuanListPage();
                	//返回重新渲染水桶
                	_this.checkinsAjax(_this.getUserWaterUrl);
                }
                
            },false);
        },
        //弹出层方法，通过子组件checkinsCpn调用
        popShow:function(){
            if(this.popType){
                this.popType = false;
                document.body.style.overflowY = 'auto';
                this.$refs.measure.measureInject();//签到完成后再次调用水桶动画显示新水量
            }else{
                this.popType = true;
                document.body.style.overflowY = 'hidden';
            }
        },
        //页面请求方法
        checkinsAjax:function(url,argument){
            this.$http.post(common.isdev() + url,{argument}).then(function(d) {

                var data = typeof d.data === 'object' ? d.data : JSON.parse(d.data);
                //验证登录
                if(data.result == -99){
                    common.goLogin();
                }else{
                    //判断今日是否已经签到
                    this.$refs.measure.measureInject(data);
                }
            }, function(err) {

            });
        }
    }
}
   
</script>


<style lang="scss" scoped>
 
@import '../../assets/css/common.scss';    
    
@function rem($px){
  @return $px / 10 * 1rem;
}
html,body{
    height:100%;
}
body {
    background: #f4f4f4;
}
.page-bg{
    width:100%;
    //height:rem(1005);
    //background:url(../../assets/image/qdgs/checkins.jpg) no-repeat;
	background:#ff695b url('../../assets/image/qdgs/banner-head.jpg') top center no-repeat;
	background-size: 100%;
	min-height: 100%;
}
.page-title{
    font-size:rem(36 / 2);
    color:#fff;
    text-align:center;
    padding-bottom:rem(10 / 2);
}
.page-em{
    font-size:rem(24 / 2);
    color:#fff;
    text-align:center;
    display:block;
    padding-bottom:rem(20 / 2);
}
.checkins{
    font-family: "Microsoft YaHei";
    padding:rem(250 / 2) rem(34 / 2) rem(34 / 2) rem(34 / 2);
    overflow:hidden;
}
//公共内容

.cpn-box {
	/*礼品券内容*/
	width: 100%;
	height: 20rem;
	margin-top: 1rem;
	border-radius:10px;
	padding-top: 1.4rem;
	overflow: hidden;
	
	text-align:  center;
	font-size: 1.8rem;
	line-height: 2.5rem;
	color: #333333;
	
	background:#ffffff url('../../assets/image/qdgs/gs-cpn-content.png') center bottom no-repeat;
    background-size: 32.6rem 19.2rem;
}
.rule-box{
    margin-top: 1rem;
    padding-top:rem(40 / 2);
    border-radius:10px;
    min-height:rem(440 / 2);
    background-color:#fff;
    position:relative;
    .rule-title{
        color:#333333;
        font-size:rem(36 / 2);
        text-align:center;
        margin-bottom:rem(35 / 2);
    }
    .rule-cont{
        width:100%;
        color:#333333;
        font-size:rem(24 / 2);
        padding:rem(5 / 2) rem(80 / 2) rem(75 / 2) rem(80 / 2);
        word-break: break-all;
        .cont-title{
            font-weight:bold;
        }
        p{
            line-height:1.6;
            padding-bottom:rem(10 / 2);
        }
    }
}
.rule-box::after,.rule-box::before{
    content:'';
    width:rem(90 / 2);
    height:rem(90 / 2);
    display:block;
    border-radius:30px;
    background-color:#ff695b;
    position:absolute;
    top:rem(175 / 2);
}
.rule-box::after{
    left:rem(-45 / 2);
}
.rule-box::before{
    right:rem(-45 / 2);
}

//弹层
.pop-on::after{
    content:'';
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin:auto;
    background-color:#000;
    opacity:0.8;
}
.pop-main{
    width:rem(430 / 2);
    height:rem(430 / 2);
    border-radius:10px;
    background-color:#fff;
    position:fixed;
    top:rem(325 / 2);
    left:0;
    right:0;
    margin:0 auto;
    z-index:10;
    display:none;
    -webkit-transform: scale(1.2, 1.2);
    transform: scale(1.2, 1.2);
    .pop-title{
        width:rem(284 / 2);
        height:rem(59 / 2);
        font-size:rem(30 / 2);
        color:#fff;
        text-shadow:1px 1px 1px #c43c28;
        text-align:center;
        background:url('../../assets/image/qdgs/title-bg.png') no-repeat;
        background-size:100% 100%;
        margin:rem(-35 / 2) auto rem(14 / 2) auto;
    }
    .pop-cont{
        margin-bottom:rem(15 / 2);
        p{
            text-align:center;
            font-size:rem(24 / 2);
            color:#e84f38;
        }
    }
    .icon-water{
        width:rem(150 / 2);
        height:rem(103 / 2);
        padding-top:rem(120 / 2);
        display:block;
        background:url('../../assets/image/qdgs/water-bg.png') no-repeat;
        background-size:100% 100%;
        font-size:rem(40 / 2);
        color:#fff;
        text-align:center;
        font-weight:bold;
        margin:0 auto rem(20 / 2) auto;
    }
    .pop-btn{
        width:100%;
        height:rem(78 / 2);
        line-height:rem(78 / 2);
        text-align:center;
        font-size:rem(32 / 2);
        color:#fff;
        display:block;
        background-color:#fa3448;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
    }
}
.pop-show{
    display:block;
}
</style>

